<template>
    <div class="Task" :style="style">
        <h1>任务清单</h1>
        <input type="text" v-model="key" placeholder="输入索取号"/>
        <button @click="getList()">刷新内容</button>
        <ul>
            <li v-for="(item,index) in details" :key="index" @click="(tipIndex=item.book_index),(id=item.id)" >
                <p>
                    <span class="book-index" v-text="item.book_index"/>
                    <span class="publish" v-text="item.book_publish" />
                </p>
                <p class="name" v-text="item.book_name.substr(0,19)"/>
            </li>
        </ul>
        <div v-show="tipIndex !== ''" class="tip" >
            <h1>请确认找到索引号为 {{tipIndex}}的图书?</h1>
            <button @click="handler('登记中')" class="t-btn" >已找到</button>
            <button @click="handler('已取消')" class="t-btn"  >未找到</button>
            <button @click="tipIndex=''" class="t-btn"  >取消</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {
                key: '',
                details: [],
                tipIndex:'',
                id:0,
            }
        },
        computed: {
            style() {
                return 'width:' + window.screen.width + 'px;height:' + window.screen.height + 'px;';
            }
        },
        created(){
            this.getList();
        },
        methods: {
            getList() {
                this.$axios.get('/finder', {params: {bookIndex: this.key}})
                    .then(res => {
                        if (res.data.code === 200) {
                            this.details = res.data.content;
                        } else {
                            window.alert('查询失败');
                        }
                    });
            },
            handler(status){
                // 处理订单
                this.$axios.put('/finder',{id:this.id, res:status}).then(this.$then).finally(()=>{
                    this.tipIndex = '';
                    this.getList();
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "Task";
</style>
